﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}

<!-- content-area -->
<div id="news">
    <div class="light-section section-block">
        <div class="container">
            <div class="section-space"></div>
            <div class="row">

                <div class="col-lg-6" v-for="item in dataList" style="margin-bottom:20px;">
                    <div class="car">
                        <a :href="url+item.Id"><img :src="item.CoverImage" /></a>
                        <div class="car-description">

                            <h5 class="car-name"><a :href="url+item.Id">{{item.MotoTitle}}</a></h5>

                            <div class="car-area">

                                <div class="car-price">
                                    ${{item.MotoPrice}}
                                </div>

                                <div class="tech">
                                    <span><i class="fa fa-gears" title="Motor power"></i> <small>{{item.MotoPailiang}}</small> </span>
                                    <span><i class="fa fa-dashboard" title="0 - 100 km / h acceleration"></i> <small>{{item.MotoJiasu}}</small> </span>
                                    <span><i class="fa fa-battery-3" title="Fuel consumption"></i> <small>{{item.MotoZhiliang}}</small> </span>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="pagination">
                        <ul>
                            <li v-if="pageIndex>1"><a v-on:click="pageIndex--,pageClick()">上一页</a></li>
                            <li v-if="pageIndex==1"><a class="banclick">上一页</a></li>
                            <li v-for="index in indexPage" v-bind:class="{ 'active': pageIndex == index}">
                                <a v-on:click="btnClick(index)">{{index}}</a>
                            </li>

                            <li v-if="pageIndex!=all"><a v-on:click="pageIndex++,pageClick()">下一页</a></li>
                            <li v-if="pageIndex == all"><a class="banclick">下一页</a></li>
                        </ul>
                    </div>
                    <!--分页-->

                </div>
            </div>
            <div class="section-space"></div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#news",
        data: {
            url: '/Product/ProductDetail?id=',
            dataList: [],
         
            all: 0,//总页数
            pageIndex: 1, //当前页
            pageSize: 100, //每页条数
            
            indexPage: []

        },
        mounted() {
            this.getReq();//渲染之前
            this.getList(1);//获取数据

        },

        methods: {
            //获取News内容
            getList(pageIndex) {
                var that = this
                $.ajax({
                    type: 'GET',
                    url: '/api/Moto/GetPageListJson?pageSize=' + this.pageSize + '&pageIndex=' + pageIndex,
                    data: {},
                    success: function (res) {
                        that.dataList = res.Result,
                            that.all = res.TotalCount,                       
                        vm.$forceUpdate();                       
                        that.indexs();//分页
                    }
                });
            },
            //获取url参数
            getReq() {
                var Requset = new Object;
                Requset = GetRequest();
                //this.NewsType = Requset["NewsType"]
                
            },
            //分页
            indexs() {
                var left = 1;
                var indexall = parseInt(this.all / this.pageSize);

                var arr = [];
                if (indexall == 0) {
                    arr.push(1);
                } else {
                    for (let i = 1; i <= indexall; i++) {
                        arr.push(i);

                    }
                }
                this.indexPage = arr;
                console.log(arr)

            },
            //分页
            btnClick: function (data) {//页码点击事件
                if (data != this.pageIndex) {
                    this.pageIndex = data
                }
                //根据点击页数请求数据
                this.getList(this.pageIndex);
            },
            pageClick: function () {
                //根据点击页数请求数据
                this.getList(this.pageIndex);
            }

        },
        created() {

        },
    })
</script>

